<script>
export default {
  name: "custom-menu",
  props: {
    data: {
      type: Array,
      default: () => [],
    },
    active:{
      type:String,
      default: "1"
    },
    mode:{
      type:String,
      default:'horizontal'
    }
  },

  render(h) {
    const getMenus = (data) => {
      return data.map((item) => {
        if (item.children) {
          return h(
            "el-submenu",
            {
              attrs: {
                index: item.index,
              },
            },
            [
              h("template", { slot: "title" }, [
                h('i',{attrs:{class:'el-icon-location',color:'#eee',name:item}}),
                h('span',{attrs:{slot:'title'}},[item.label])
              ]),
              getMenus(item.children),
            ]
          );
        } else {
          return h(
            "el-menu-item",
            {
              attrs: {
                index: item.index,
              },
            },
            [
              h('i',{attrs:{class:'el-icon-location',color:'#eee'}}),
              h('span',{
                attrs:{slot:'title'}
              },item.label)
            ]
          );
        }
      });
    };
    console.log(getMenus(this.data));
    return h("el-menu",{attrs:{'default-active':this.active}},getMenus(this.data));
  },
};
</script>
<style lang="less" scoped>
</style>
